<template>
    <div class="item-tool-bar">
        <div class="tools">
            <slot name="prepend"></slot>

            <!-- <div class="views btn re-img" v-if="/views/.test(layout)"> -->
            <div :class="['views', 'btn' , { 're-img' : isImg} ]" v-if="/views/.test(layout)">
                <i v-if="!isImg" class="iconfont">
                    &#xe8c7;
                </i>
                <img v-if="isImg" src="@/assets/images/document/see.png" alt="">
                {{data.viewamount || 0}}
            </div>
            
            
            <div 
            class="like btn" 
            v-if="/like/.test(layout)" 
            :class="{active: likedinfo.isoperated}" 
            @click="likeHandler"
            >
                <slot name="like">
                    <i class="iconfont">
                        &#xe60c;
                    </i>{{likedinfo.likedamount ? likedinfo.likedamount : '点赞'}}
                </slot>
            </div>

            <div class="download btn" v-if="/download/.test(layout)">
                <i v-if="!isImg" class="iconfont">
                    &#xe639;
                </i>
                 <img v-if="isImg" src="@/assets/images/document/down.png" alt="">
                {{data.downloadamount || 0}}
            </div>

          

            

            <div class="comment btn" v-if="/comment/.test(layout)" @click="clickHandler('comment')">
                <i class="iconfont">
                    &#xe63a;
                </i>{{commentParent ? (commentShow ? '收起评论' : '评论') : (commentinfo.commentamount ? commentinfo.commentamount : '评论')}}
            </div>
            
            <div 
            class="collect btn" 
            v-if="/collect/.test(layout)" 
            >
                <i class="iconfont">
                    &#xe62b;
                </i>{{Number(collectinfo.collectamount) ? collectinfo.collectamount : 0}}
            </div>

            <share-popover
            v-if="/share/.test(layout)" 
            :share="share"
            class="btn"
            >
                <div 
                class="share btn" 
                slot="reference"
                >
                    <i class="iconfont">
                        &#xe679;
                    </i>分享
                </div>
            </share-popover>

            <disliked-dropdown
            v-if="/shield/.test(layout)" 
            class="btn"
            :rowguid="rowguid"
            :type="type"
            @shield="$emit('shield')"
            >
                <div 
                class="disliked btn" 
                >
                    <i class="iconfont">
                        &#xe642;
                    </i>不感兴趣
                </div>
            </disliked-dropdown>

            <div class="edit btn" v-if="/edit/.test(layout)" @click="clickHandler('edit')">
                <i class="iconfont">
                    &#xe641;
                </i>编辑
            </div>

            <div class="del btn" v-if="/del/.test(layout)" @click="clickHandler('del')">
                <i class="iconfont">
                    &#xe67d;
                </i>删除
            </div>

            <slot></slot>

            <div class="addtime" v-if="/addtime/.test(layout)">
                {{data.addtime | dateFormat}}
            </div>
        </div>

        <el-collapse-transition>
            <div class="comment-row" v-if="commentShow">
                <comment-input 
                    size="small"
                    :parentguid="commentParent"
                    :placeholder="commentPlaceholder"
                    @submit="commentSubmitHandler"
                ></comment-input>
            </div>
        </el-collapse-transition>
    </div>
</template>

<script>
import app from '@js/app-node';
import TOOLBAR_MIXIN from '@components/sys/item-tool-bar/mixins/index';

import CommentInput from '@components/sys/comment/components/input';
import SharePopover from './components/share-popover';
import DislikedDropdown from './components/disliked-dropdown';

export default {
    mixins: [TOOLBAR_MIXIN],
    components: {
        CommentInput,
        SharePopover,
        DislikedDropdown,
    },
    props: {
        data: {
            type: Object,
            default: () => ({}),
        },
        layout: {
            type: String,
            default: 'views,like,download,comment,collect,share,addtime'
        },
        commentParent: {
            type: String,
            default: '',
        },
        commentPlaceholder: {
            type: String,
            default: '',
        },
        isImg:{
            type: Boolean,
            default: false,
        }
    },
    data() {
        return {
            commentShow: false,
        };
    },
    filters: {
        dateFormat(time) {
            // time = '2019/08/01 09:40:00';
            if(!time) return;

            var oldtime;
            
            if(app.getType(time) === 'string') {
                time = time.replace(/\-/g, '/');
                oldtime = new Date(time);
            } else {
                oldtime = time;
            }

            var now = new Date(),
                delta = 0,
                oldtime_s,
                now_s;

            oldtime_s = oldtime.getTime();
            now_s = now.getTime();
            delta = now_s - oldtime_s;

            if(delta / (1000 * 60 * 60) < 1) {
                //小于1h；
                return Math.ceil(delta / (1000 * 60)) + '分钟前';
            } else if(delta / (1000 * 60 * 60 * 24) < 1) {
                //小于1天
                return Math.ceil(delta / (1000 * 60 * 60)) + '小时前';
            } else if(delta / (1000 * 60 * 60 * 24 * 7) < 1) {
                //小于7天
                return Math.ceil(delta / (1000 * 60 * 60 * 24)) + '天前';
            } else if(oldtime.getFullYear() === now.getFullYear()) {
                //同年
                return oldtime.Format('MM-dd');
            } else {
                return oldtime.Format('yyyy-MM-dd');
            }
        },
    },
    computed: {
        commentinfo() {
            return this.data.commentinfo || {};
        },
    },
    methods: {
        clickHandler(type) {
            var switchObj = {
                'comment': () => {
                    if (this.commentParent) {
                        this.commentShow = !this.commentShow;
                        return;
                    }

                    this.goto(`${this.share}#comment`)
                },
                'edit': () => {
                    this.$emit('edit');
                },
                'del': () => {
                    showConfirm('确认要进行删除操作吗？', 'warning', () => {
                        this.$emit('del');
                    });
                },
            };

            switchObj[type]();
        },
        commentSubmitHandler(data) {
            this.$emit('comment', data);
            this.commentShow = false;
        },
    },
}
</script>

<style lang="scss" scoped>
    @import '@css/var.scss';

    .item-tool-bar{
        margin-top: 16px;

        .tools {
            color: #666;
            
            &:after{
                display: inline-block;
                content: '';
                clear: both;
            }
        }

        .btn{
            float: left;
            cursor: pointer;
            line-height: 1em;
            font-size: 14px;
            transition: all .3s;
            
            i{
                display: inline-block;
                width: 14px;
                height: 14px;
                font-size: 14px;
                color: #b4b4b4;
                margin-right: 7px;
                transition: all .3s;
            }

            & + .btn{
                margin-left: 25px;
            }

            &.active, &.active i{
                color: $primaryColor;
            }

            img{
                width:16px;
                margin-bottom: -2px;
            }
            .re-img{
                // width:18px;
                margin-bottom: -2px;
            }
        }

        .collect {
            cursor:auto;
            &.active, &.active i{
                color:$warningColor;
            }
        }

        .views {
            cursor:auto;
        }

        .download {
            cursor:auto;
        }

        .addtime{
            float: right;
            cursor: default;
        }

        .comment-row {
            margin-top: 20px;
        }
    }
</style>